<template>
  <a-row :gutter="20"
         class="condition-add">
    <a-col :span="24">
      <slot>
        <a-row class="add-a-button">
          <a-col :span="3">
            <!-- 添加按钮 -->
            <a-button type="primary"
                      @click="addCondition()">
              {{ buttonName }}
            </a-button>
          </a-col>
          <a-col v-if="isType"
                 class="condition-relation"
                 :span="20">
            <!-- <label>{{ label }} </label> -->
            <a-radio-group v-model="valueCopy.type"
                           v-if="!onlyAnd">
              <a-radio :value="'1'">且条件</a-radio>
              <a-radio :value="'2'">或条件</a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row style="display:flex"
               v-for="(item,key) in valueCopy.specifics"
               :key="key">
          <a-col :span="23">
            <ConditionJudge :value="item"
                            @verifyInfoFun="verifyInfoFun"
                            @rowText="text => setText(text,key)"
                            :list="list">
            </ConditionJudge>
          </a-col>
          <a-col :span="1"
                 class="ant-delete">
            <a-icon type="delete"
                    v-show="valueCopy.specifics.length > 1"
                    @click="removeCondition(key)" />
          </a-col>
        </a-row>
      </slot>
    </a-col>
  </a-row>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'
import ConditionJudge from './ConditionJudge.vue'
export default {
  name: 'ConditionAdd',
  components: {
    ConditionJudge
  },
  props: {
    value: PropTypes.object.def({}),
    buttonName: PropTypes.string.def('添加条件'),
    list: PropTypes.array.def([]).des('数据源'),
    label: PropTypes.string.def('条件关系'),
    index: PropTypes.string.des('判断条件列表索引'),
    onlyAnd: PropTypes.bool.def(false),
    isType: PropTypes.bool.def(true)
  },
  data () {
    return {
      valueCopy: {}
    }
  },
  watch: {
    value: {
      handler (newValue) {
        this.valueCopy = newValue
      },
      deep: true,
      immediate: true
    },
    valueCopy: {
      handler (newValue) {
        this.emit(newValue)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    verifyInfoFun () {
      this.$emit('verifyInfoFun', false)
    },
    addCondition () {
      this.verify(this.valueCopy.specifics, (verify) => {
        let arr = this.valueCopy.specifics
        if (verify) {
          this.valueCopy.specifics.push({
            filed: undefined,
            dataType: '',
            operator: undefined,
            value: '',
            orderNo: arr.length == 0 ? '0' : ((Number(arr[arr.length - 1].orderNo) + 1) + ''),
            type: '1'
          })
        }
      })
    },
    verify (list, fun) {
      if (list.length == 0) {
        this.$emit('verifyInfoFun', false)
        fun(true)
        return
      }
      const obj = list[list.length - 1]
      if (obj.operator == 'null' || obj.operator == 'notnull') {
        if (obj.filed && obj.operator) {
          this.$emit('verifyInfoFun', false)
          fun(true)
        } else {
          this.$emit('verifyInfoFun', true)
          fun(false)
        }
      } else {
        if (obj.filed && obj.operator && (!!obj.value || obj.value === 0)) {
          this.$emit('verifyInfoFun', false)
          fun(true)
        } else {
          this.$emit('verifyInfoFun', true)
          fun(false)
        }
      }
    },
    emit (value) {
      if (this.index != null) {
        const index = this.index
        this.$emit('input', { value, index })
        this.$emit('change', { value, index })
      } else {
        this.$emit('input', value)
        this.$emit('change', value)
      }
    },
    // 设置文本
    setText (text, key) {
      this.$emit('rowText', { key, text })
    },
    removeCondition (key) {
      this.valueCopy.specifics.splice(key, 1)
      this.$emit('verifyInfoFun', false)
    },
    clear () {
      this.valueCopy = {
        type: '1',
        specifics: []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.condition-add {
  background: #fff;
  padding: 0 20px;
  border: 1px solid #e8e8e8;
  .ant-delete {
    align-self: center;
    text-align: center;
    color: #1890ff;
    font-size: var(--font-size-16);
  }
  .add-a-button {
    padding: 20px 0;
    .condition-relation {
      text-align: right;
      margin-top: 8px;
      label {
        font-size: 14px;
        padding-right: 40px;
      }
    }
  }
}
</style>
